<template>
  <div class="about">
  <div class="head">
    <div class="erwm">
      <img src="@/assets/二维码.png" alt="">      
    </div>
     <div class="size">
        <img src="@/assets/关注.png" alt="">     
        <span class="guanzhu">关注房先森官方微信公众号<span class="huang">sirfang_com</span></span><br>
     </div>
     <div class="cha">X</div>
  </div>
  <div class="input">
      
<van-search
  v-model="value"
  show-action
 
>
  <template #action>
    <div >搜索</div>
  </template>
</van-search>
     

  </div>
  <!-- 装修 -->
     <div class="ul">
       <ul >
           <li class="li">装修前</li>
           <li>装修中</li>
           <li>装修后</li>
       </ul>
     </div>
     <!-- 收房验房 -->
     <div class="shou">
         <ul>
             <li>
                  <i class="iconfont icon-house"></i> <br />
                   <span>装修贷款</span>
             </li>
             <li>
                  <i class="iconfont icon-budget"></i> <br />
                   <span>装修预算</span>
             </li>
             <li>
                  <i class="iconfont icon-taiji"></i> <br />
                   <span>装修风水</span>
             </li>
             <li>
                  <i class="iconfont icon-designer"></i> <br />
                   <span>装修设计</span>
             </li>
         </ul>

     </div>
     <van-button type="default" class="button" @click="gotoProcess">了解装修流程</van-button>
     <!-- 为你推荐 -->
     <div class="tuijian">
         <div class="wu">
        <div class="q"><span class="an"></span>为您推荐 </div>
        
      </div>
     </div>
     <!-- 列表 -->
     <div class="lb">
        <div v-for="(item,index) in ress" :key="index" class="lb1">
            <div class="but">
                <div class="imgg"><img :src="item.img" alt=""></div>
                <div class="title">{{item.title}}</div>
                <div class="time"><i class="iconfont icon-time"></i>{{item.edit_time}} <i class="iconfont icon-view i">255</i>
                </div>
                 
            </div>
        </div>
     </div>
     <van-button type="default" class="button">换一换<i class="iconfont icon-change "></i></van-button>
     <div class="fang">
             &emsp;房先森互联网家装有别于传统装修公司与其他装修中介平台，以自营模式整合设计师与项目经理，利用互联网将工地进行在线全景直播，通过去中间环节，提供装修套餐 + 个性化定制服务
     </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Search } from "vant";
import { Button } from "vant";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      ress: []
    };
  },
  mounted() {
    this.$axios.get("/api/home/gonglue").then(res => {
      console.log(res.data);
      this.ress = res.data.data.list;
    });
 
  },
  components: {},
  methods: {
    gotoProcess(){
      this.$router.push('/process')
    }
  },
  computed: {}
};
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

.head {
  width: 100%;
  height: 5rem;
  background-color: #39c893;
  float: left;
  .erwm {
    width: 80px;
    height: 5rem;
    margin-left: 20px;
    // border: red 1px solid;
    float: left;
    img {
      width: 100%;
      height: 100%;
      // float: left;
    }
  }
  .size {
    width: 240px;
    // border: red 1px solid;
    height: 5rem;
    float: left;
    margin-left: 10px;
    img {
      margin-top: 10px;
      width: 80%;
    }
    .guanzhu {
      width: 240px;
      // border: red 1px solid;
      float: left;
      margin-top: 10px;
      border-radius: 19px;
      line-height: 1.5rem;
      display: block;
      height: 1.5rem;
      background-color: #2bb280;
      color: white;
      font-size: 13px;
    }
    .huang {
      color: rgb(228, 215, 38);
    }
  }
  .cha {
    // border: red 1px solid;
    float: left;
    width: 1rem;
    height: 1rem;
    font-size: 20px;
  }
}

.ul {
  width: 100%;
  margin-top: 10px;
  height: 4rem;
  background-color: white;
  // border: red 1px solid;
  ul {
    li {
      float: left;
      line-height: 4rem;

      text-align: center;
      width: 121px;
    }
    .li {
      border-bottom: 1px solid #39c893;
    }
  }
}
.shou {
  width: 100%;
  height: 6rem;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  margin-top: 1px;
  ul {
    li {
      float: left;
      width: 90px;
      // border: 1px solid #39c893;
      height: 6rem;
      i {
        line-height: 3rem;
        border: 3px solid #39c893;
        width: 50px;
        height: 50px;
        display: block;
        color: #39c893;
        border-radius: 50%;
        text-align: center;
        font-size: 40px;
        margin-left: 17px;
      }

      span {
        text-align: center;
        display: block;
      }
    }
  }
}
.button {
  width: 98%;
  margin-left: 2px;
  border: 1px solid #39c893;
  color: #39c893;
}
.tuijian {
  width: 100%;
  //   background-color: #ffffff;
  margin-top: 10px;
  .wu {
    width: 100%;
    height: 4rem;
    // border: 1px red solid;
    .an {
      display: block;
      margin-left: 10px;
      //  border: 1px red solid;
      width: 0.3rem;
      height: 2.5rem;
      margin-top: 0.2rem;
      margin: 0 20 10 10;
      background-color: rgb(81, 195, 157);

      float: left;
    }
    .q {
      width: 530px;
      height: 4rem;
      background-color: #fff;
      //  border: 1px red solid;
      font-size: 20px;
      line-height: 3rem;
    }
  }
}
.lb {
  width: 100%;
  // height: 20rem;
  background-color: #ffffff;
  float: left;
  img {
    width: 100%;

    // float: left;
  }
 
  .lb1 {
    width: 100%;
    float: left;
    height: 8rem;
    margin: 0.2rem;
    background-color: #fff;
    // background-color: rgb(81, 195, 157);
  }
  .imgg {
    width: 170px;
    height: 130px;
    float: left;
    img{
        width: 170px;
        height: 130px;
    }
    // background-color: #ffffff;
  }
  .title {
    float: left;
    // position: absolute;
   width: 200px;
//    font-size: 20px;
color: rgb(83, 81, 81);
  }
  .time{
   color: rgb(168, 161, 161);
//    width: 100px;
margin-left: 10px;
   float: left;
   margin-top: 30px;
   font-size: 17px;


  }
  .i{
      margin-left: 30px;
  }
}
.fang{
    width: 100%;
    background-color: #ffffff;
}
</style>
